{% extends "base/base.html" %}
{% load bootstrap4 %}
{% load leaflet_tags %}
{% load staticfiles %}

{% block content %}
<form method="post" action="" class="form">
    {% csrf_token %}
    <div class="row">
        <div class="col-md-6" id="map">
            {% bootstrap_field form.track show_label=False %}
            {% leaflet_map "mainmap" callback="window.map_init_basic" %}
        </div>
        <div class="col-md-6" id="other">
            {% bootstrap_form_errors form %}
            {% bootstrap_field form.title show_label=False %}
            <div class="row">
                <div class="col-sm-6">
                    {% bootstrap_field form.event show_label=False %}
                </div>
                <div class="col-sm-6 text-center" id="event-dates"></div>
            </div>
            {{ form.text }}
            {% bootstrap_field form.tags show_label=False %}
            <div class="col-12 form-group text-center">
                {% bootstrap_button 'Save' button_type='submit' button_class='btn-success' %}
            </div>
        </div>
    </div>
</form>
{% endblock %}

{% block css %}
    {% leaflet_css %}
    <link href="{% static 'css/story-editor.css' %}" rel="stylesheet" media="screen">
{% endblock %}

{% block js %}
    {% leaflet_js %}
    <script>
        var url_track_json = "{% url 'track:json' 0 %}",
            url_calendar_dates = "{% url 'calendar:dates_event' 0 %}";
    </script>
    <script src="{% static 'js/story-editor.js' %}"></script>
{% endblock %}
